<template>
  <div class="dialog">
    <div class="text">
        <p>
            id: 
            <input v-model="editInfo.id" type="text">
        </p>
        <p>
            书名:
            <input v-model="editInfo.name" type="text">
        </p>
        <button @click="cancel">取消</button>
        -----
         <button @click="success">确定</button>
    </div>
  </div>
</template>

<script>
export default {
    // 接收父组件传递过来的内容
    props: ["info"],
    data() {
        return {
            editInfo: {}
        }
    },
    // 
    watch: {
        info: {
            deep: true,
            handler(newValue) {
                this.editInfo = JSON.parse(JSON.stringify(newValue))
            }
        }
    },
    // mounted() {
    //     console.log(this.editInfo)
    //     // this.editInfo = JSON.parse(JSON.stringify(this.info))
    // },
    methods: {
        cancel() {
            this.$emit("sendFalse", false)
        },
        success() {
            // 向父组件传递数据并修改
            this.$emit("sendEditInfo", this.editInfo)
            this.cancel()
        }
    }
}
</script>

<style>
.dialog {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .4);
}

.text {
    margin: auto;
    margin-top: 200px;
    width: 240px;
    height: 360px;
    background: #fff;
}
</style>